<template>
  <div class="count-container">
    <div class="title">
      <p>热门景区排行</p>
      <img src="../../images/dataScreen-title.png" alt="" />
    </div>
    <div class="charts" ref="charts"></div>
  </div>
</template>

<script setup lang="ts">
  import { onMounted, ref } from 'vue'
  import * as echarts from 'echarts'

  const charts = ref<HTMLDivElement | null>(null)

  onMounted(() => {
    let myCharts = echarts.init(charts.value)
    let textRich = {
      rich: {
        a: {
          color: '#aae9ff',
          fontSize: 16,
        },
        b: {
          color: '#fff',
          fontSize: 26,
          fontWeight: 600,
          padding: [0, 10, 0, 10],
        },
        c: {
          color: '#fff',
          fontSize: 26,
          fontWeight: 600,
          padding: [0, 10, 0, 10],
        },
      },
    }
    let options = {
      // backgroundColor: '#0b1d2c',
      title: [
        {
          text: '填充雷达图',
          top: '5%',
          left: '40%',
          textStyle: { color: '#d9d9d9', fontSize: 22 },
        },
        {
          text: ['{a|年度计划}', '{b|100}', '{a|个}'].join(''),
          left: '63%',
          top: '42%',
          textStyle: textRich,
        },
        {
          text: ['{a|年度完成}', '{b|100}', '{a|个}'].join(''),
          left: '63%',
          top: '52%',
          textStyle: textRich,
        },
        {
          text: ['{a|完成百分比}', '{c|50%}'].join(''),
          left: '63%',
          top: '62%',
          textStyle: textRich,
        },
      ],
      legend: {
        top: '30%',
        right: '16%',
        textStyle: { color: '#d9d9d9', fontSize: 22 },
        data: ['计划量', '完成量'],
        icon: 'square',
      },
      // 雷达图坐标系组件，只适用于雷达图
      radar: {
        radius: '50%',
        center: ['30%', '52%'],
        // 开始角度
        startAngle: 0,
        triggerEvent: true,
        name: { textStyle: { color: '#fff', fontSize: '20', borderRadius: 3, padding: [20, 5] } },
        // 指示器名称和指示器轴的距离。
        nameGap: '2',
        // 雷达图的指示器，用来指定雷达图中的多个变量（维度）
        indicator: [
          { name: '二季度', max: 6500 },
          { name: '一季度', max: 16000 },
          { name: '四季度', max: 30000 },
          { name: '三季度', max: 38000 },
        ],
        // 坐标轴在 grid 区域中的分隔区域，默认不显示。
        splitArea: {
          areaStyle: {
            color: ['rgba(0,255,255, 0)'],
            shadowColor: 'rgba(0, 0, 0, 0)',
            shadowBlur: 0,
            shadowOffsetX: 10,
            shadowOffsetY: 10,
          },
        },
        // 坐标轴在 grid 区域中的分隔线。
        splitLine: {
          lineStyle: {
            width: 1,
            color: ['rgba(99,113,124, 0.9', 'rgba(99,113,124, 0.9)', 'rgba(99,113,124, 0.9)', 'rgba(99,113,124, 0.9)', 'rgba(99,113,124, 0.9)', 'rgba(99,113,124, 0.9)'].reverse(),
          },
        },
        axisLine: { lineStyle: { color: '#63717c' } },
      },
      series: [
        {
          name: '计划量',
          type: 'radar',
          areaStyle: { color: 'rgba(6,83,128, 1)' },
          symbol: 'circle',
          symbolSize: 0,
          itemStyle: { color: 'rgba(127,255,210,0.8)', borderColor: 'rgba(127,255,210,0.2)', borderWidth: 0 },
          lineStyle: { color: 'rgba(127,255,210, 0.6)', width: 0 },
          label: { show: false },
          data: [[4600, 13000, 25000, 23500]],
        },
        {
          name: '完成量',
          type: 'radar',
          areaStyle: { color: 'rgba(41,134,195, 0.5)' },
          symbol: 'circle',
          symbolSize: 0,
          itemStyle: { color: 'rgba(255,237,145,0.8)', borderColor: 'rgba(255,237,145,0.2)', borderWidth: 0 },
          lineStyle: { color: 'rgba(255,237,145, 0.6)', width: 0 },
          data: [[5300, 15000, 12800, 13500, 15000]],
        },
      ],
      tooltip: {
        show: true,
      },
    }
    myCharts.setOption(options)
  })
</script>

<style lang="scss" scoped>
  .count-container {
    width: 100%;
    height: 100%;
    background: url(../../images/dataScreen-main-cb.png) no-repeat;
    background-size: 100% 100%;
    margin-top: 20px;
    .title {
      // margin-left: -5px;
      p {
        color: #fff;
        font-size: 20px;
      }
    }

    .charts {
      height: calc(100% - 30px);
    }
  }
</style>
